<template>
  <div :class="wrpCls">
    项目：<a-select v-model="projectId" placeholder="请选择项目">
      <a-select-option :value="item.id" v-for="item in projectList">{{item.projectName}}</a-select-option>
    </a-select>
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
    <select-lang :class="prefixCls" />
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
import { getProjectList } from '@/api/logstash_project'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showMenu: true,
      currentUser: {},
      projectList: [],
      projectId: null
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.currentUser = {
        name: 'Serati Ma'
      }
    }, 1500)
    getProjectList().then(res => {
      this.projectList = res.data != null ? res.data : []
      const me = this
      if(this.projectList.length == 0){
        this.$warning({
          title: '重要提示',
          content: '请建立项目',
          onOk: function () {
            me.$router.push({ path: '/data-control/project' })
          }
        });
      }else{
        if(this.$store.state.project.projectId){
          this.projectId = this.$store.state.project.projectId
        }else{
          this.projectId = this.projectList[0].id
          this.$store.commit("SET_PROJECT", {projectId: this.projectId, projectName: this.projectList[0].id})
        }
      }
    })
  }
}
</script>
